<template>
  <yx-dialog
    v-model="dialog.visible"
    @right-button="rightButton"
    :title-style="{ color: '#000' }"
    :right-button-data="dialog.rightButtonData"
    width="50%"
  >
    <render :render="renders" :test="'dffff'"></render>
  </yx-dialog>
  <yx-drop-down-tree
    :data="data"
    :convert-setting="convertSetting"
    multiple
    :width="300"
    columnCollapseTags
    v-model="value"
    check-strictly
  ></yx-drop-down-tree>
</template>
<script lang="ts">
import { defineComponent, reactive, h, toRaw, ref } from 'vue'
import render from '@/components/render/index.ts' //用了@必须用完整的路径
export default defineComponent({
  name: 'Test',
  components: {
    render,
  },
  setup(props) {
    const convertSetting = ref({
      convert: true,
    })
    const value = ref([1, 2])
    const data = ref([
      {
        id: 1,
        label: '一级 1',
        pid: -1,
      },
      {
        id: 2,
        label: '二级 1',
        pid: 1,
      },
      {
        id: 3,
        label: '一级 2',
        pid: -1,
      },
      {
        id: 4,
        label: '三级 1',
        pid: 2,
      },
      {
        id: 5,
        label: '三级 2',
        pid: 2,
      },
    ])
    const dialog = reactive({
      visible: false,
      rightButtonData: [
        {
          value: '暂不通知',
        },
        {
          type: 'primary',
          value: '确定通知',
        },
      ],
    })
    console.log(props, 1)

    const renders = (e: any) => {
      const param = toRaw(e) //用toRaw来获取Proxy的[[Target]]的值
      return h('span', {}, param.test)
    }

    const rightButton = () => {}

    return {
      dialog,
      rightButton,
      renders,
      data,
      convertSetting,
      value,
    }
  },
})
</script>

